<!DOCTYPE html>
<html>
  
<head>
  <meta charset="utf-8">
  <meta name="author" content="饿包子" />
  
  
  <title>前端面试题的收集和总结(JS 篇) | 饿包子博客</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  
    <meta name="keywords" content="面试合集," />
  

  
  <meta name="description" content="饿包子的博客">

  
  
    <link rel="icon" href="/blog/images/xian.ico">
    <link rel="apple-touch-icon" href="/blog/images/Logo.png">
  

  
<link rel="stylesheet" href="/blog/css/Awesome.min.css">


  
<link rel="stylesheet" href="/blog/css/index.css">
<link rel="stylesheet" href="/blog/styles/components/highlight/highlight.css">


  
  
<script src="/blog/common/jquery.min.js"></script>

  
    
<script src="/blog/common/Av.min.js"></script>

  

  
    
<script src="/blog/common/MathJax.js"></script>

  

  
    
<script src="/blog/common/Valine.min.js"></script>

  

  

  <script>
  // theme-ad's config script
  // it can be used in every script
  
  window.AD_CONFIG = {
    leancloud: {"appid":"gE1EosDsVgB2slV4E92yPkcG-gzGzoHsz","appkey":"niR787UVTMyJQrR6gmOiJCKe","comment":true,"count":true},
    welcome: {"enable":false,"interval":30},
    start_time: "2018-06-10",
    passwords: ["a621ab606db2a11f63edc576a729843b8269250dc324206871d90635ac5e531c", ],
    is_post: true,
    lock: false,
    author: "饿包子",
    share: {"twitter":false,"facebook":false,"weibo":true,"qq":true,"wechat":false},
    mathjax: true,
    page_type: "",
    root: "/blog/"
  };
</script>

  
<script src="/blog/vendor/sha256.min.js"></script>
<script src="/blog/js/auth.js"></script>
<script src="/blog/js/index.js"></script>
<script src="/blog/vendor/qrcode.min.js"></script>


<meta name="generator" content="Hexo 5.4.2"></head>
  <body>
    <header class="site-header">
  <div class="site-header-brand">
    
      <span class="site-header-brand-title">
        <a href="/blog/">清风逐月</a>
      </span>
    
    
      <span class="site-header-brand-motto"> | 我思故我在</span>
    
  </div>
  <div class="site-header-right">
    <nav class="site-header-navigation">
      
        <a href="/blog/" target="_self">主页</a>
      
        <a href="/blog/archives/" target="_self">归档</a>
      
        <a href="/blog/tags/" target="_self">标签</a>
      
        <a href="/blog/categories/" target="_self">分类</a>
      
        <a href="/blog/categories/%E6%97%A5%E8%AE%B0" target="_self">日记</a>
      
    </nav>
    <div class="site-header-btn">
      
        <a href="https://github.com/lixianbin1/" target="_blank" id="site-github">
          <i class="fa fa-github-alt"></i>
        </a>
      
      <a href="javascript:void(0);" id="site-search">
        <i class="fa fa-search"></i>
      </a>
      <a href="javascript:void(0);" id="site-nav-btn">
        <i class="fa fa-ellipsis-v"></i>
      </a>
    </div>
  </div>
</header>
<nav class="table-content" id="site-nav">
  <div class="table-content-title">
    <span>导航</span>
  </div>
  <div class="table-content-main">
    <ol class="toc">
      
        <li class="toc-item">
          <a href="/blog/" target="_self">
            主页
          </a>
        </li>
      
        <li class="toc-item">
          <a href="/blog/archives/" target="_self">
            归档
          </a>
        </li>
      
        <li class="toc-item">
          <a href="/blog/tags/" target="_self">
            标签
          </a>
        </li>
      
        <li class="toc-item">
          <a href="/blog/categories/" target="_self">
            分类
          </a>
        </li>
      
        <li class="toc-item">
          <a href="/blog/categories/%E6%97%A5%E8%AE%B0" target="_self">
            日记
          </a>
        </li>
      
    </ol>
  </div>
</nav>
<div id="site-process"></div>
    <main>
      
  <div class="passage">
  <div class="passage-meta">
    <span>
      <i class="fa fa-calendar"></i>2020-10-26
    </span>
    
      <span>
        | <a href="/blog/categories/%E9%9D%A2%E8%AF%95%E5%90%88%E9%9B%86/"><i class="fa fa-bookmark"></i>面试合集</a>
      </span>
    
    
      <span>
        | <i class="fa fa-unlock-alt"></i>UNLOCK
      </span>
    
    <span>
       | <i class="fa fa-calendar"></i>更新时间:2020-10-26 15:6 
    </span>
  </div>
  <h1 class="passage-title">
    前端面试题的收集和总结(JS 篇)
  </h1>
  
  <article class="passage-article">
    <h3 id="HTTP常见的请求方式？"><a href="#HTTP常见的请求方式？" class="headerlink" title="HTTP常见的请求方式？"></a>HTTP常见的请求方式？</h3><p>目前常见的请求方式有：<strong>GET POST PUT DELETE</strong> get一般用于请求数据，post一般用于提交数据，put一般用于更新数据，delete一般用于删除数据；不常见的有HEAD CONNECT OPTIONS TRACE PATCH; head 和get 类似，但没有响应体。 connect 一般用于代理服务器，开发中不会用到。options 一般用于CORS向服务器发送预检，检测实际请求是否被接受。trace 一般用于检测和诊断，patch 是对put 的补充，一般用于数据局部更新。</p>
<h3 id="POST-和-GET-的区别"><a href="#POST-和-GET-的区别" class="headerlink" title="POST 和 GET 的区别"></a>POST 和 GET 的区别</h3><ul>
<li>GET 请求的参数放在URL上，而POST请求的参数放在请求体里，所以GET 比POST 更不安全，参数暴露在url上，不能用来传递敏感数据</li>
<li>GET 请求参数会被保存在历史记录和书签上，GET请求只能支持URL编码，POST支持多种编码</li>
<li>GET 请求会被浏览器默认缓存，POST则需要主动设置，GET在浏览器回退时是无害，而POST会再次请求</li>
</ul>
<h3 id="讲一下HTTP的握手过程？"><a href="#讲一下HTTP的握手过程？" class="headerlink" title="讲一下HTTP的握手过程？"></a>讲一下HTTP的握手过程？</h3><p>第一次握手：客户端发送syn包(syn=j)到服务器，并进入SYN_SEND状态，等待服务器确认；<br>第二次握手：服务器收到syn包，必须确认客户的SYN（ack=j+1），同时自己也发送一个SYN包（syn=k），即SYN+ACK包，此时服务器进入SYN_RECV状态；<br>第三次握手：客户端收到服务器的SYN＋ACK包，向服务器发送确认包ACK(ack=k+1)，此包发送完毕，客户端和服务器进入ESTABLISHED状态，完成三次握手。<br>握手完成后，才会开始发送数据</p>
<h3 id="介绍下HTTPS的握手过程？"><a href="#介绍下HTTPS的握手过程？" class="headerlink" title="介绍下HTTPS的握手过程？"></a>介绍下HTTPS的握手过程？</h3><p>第一步，客户端给出协议版本号、一个客户端生成的随机数（Client random），以及客户端支持的加密方法。<br>第二步，服务端确认双方使用的加密方法，并给出数字证书、以及一个服务器生成的随机数（Server random）。<br>第三步，客户端确认数字证书有效，然后生成一个新的随机数（Premaster secret），并使用数字证书中的公钥，加密这个随机数，发给服务端。<br>第四步，服务端使用自己的私钥，获取客户端发来的随机数（即Premaster secret）。<br>第五步，客户端和服务端根据约定的加密方法，使用前面的三个随机数，生成”对话密钥”（session key），用来加密接下来的整个对话过程。 </p>
<h3 id="Http1-x和2-0的区别？"><a href="#Http1-x和2-0的区别？" class="headerlink" title="Http1.x和2.0的区别？"></a>Http1.x和2.0的区别？</h3><p><strong>新的二进制格式（Binary Format）</strong>，HTTP1.x的解析是基于文本。基于文本协议的格式解析存在天然缺陷二进制则不同，只认0和1的组合。基于这种考虑HTTP2.0的协议解析决定采用二进制格式，实现方便且健壮。<br><strong>多路复用（MultiPlexing），即连接共享</strong>，即多个请求可同时在一个连接上并行执行。某个请求任务耗时严重，不会影响到其它连接的正常执行<br><strong>header压缩</strong>，如上文中所言，对前面提到过HTTP1.x的header带有大量信息，而且每次都要重复发送，HTTP2.0使用encoder来减少需要传输的header大小，通讯双方各自cache一份header fields表，既避免了重复header的传输，又减小了需要传输的大小。<br><strong>服务端推送（server push）</strong>，服务端推送能把客户端所需要的资源伴随着index.html一起发送到客户端，省去了客户端重复请求的步骤。正因为没有发起请求，建立连接等操作，所以静态资源通过服务端推送的方式可以极大地提升速度</p>
<h3 id="如何中断ajax请求？"><a href="#如何中断ajax请求？" class="headerlink" title="如何中断ajax请求？"></a>如何中断ajax请求？</h3><p>一种是设置超时时间让ajax自动断开，另一种是手动停止ajax请求，其核心是调用XML对象的abort方法，ajax.abort()</p>
<h3 id="cookie，sessionStorage和localStorage"><a href="#cookie，sessionStorage和localStorage" class="headerlink" title="cookie，sessionStorage和localStorage"></a>cookie，sessionStorage和localStorage</h3><p>cookies:存在大小限制，由于http是无状态协议，cookie在被设计成每次请求都会自动附带，用于后台验证<br>sessionStorage：存在于窗口会话阶段，当窗口关闭既清除，一般大小为5M或者更大，<br>localStorage：除非清除，否则一直存在，大小同样为5M或更大，<br>三者都存在安全信息的问题，不建议保存安全密钥 </p>
<h3 id="src和href的区别？"><a href="#src和href的区别？" class="headerlink" title="src和href的区别？"></a>src和href的区别？</h3><p>src指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此<br>href指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，浏览器识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式</p>
<h3 id="图片优化技术有哪些？"><a href="#图片优化技术有哪些？" class="headerlink" title="图片优化技术有哪些？"></a>图片优化技术有哪些？</h3><p>图片懒加载技术，在页面不可视区域，先不将图片元素进行带入，当页面滚动后再将页面图片进行加载显示<br>图片缩略显示，在图片加载之前，将先加载图片的缩略图片，等到图片下载完成后再进行替换图片</p>
<h3 id="全局变量和局部变量的优缺点？"><a href="#全局变量和局部变量的优缺点？" class="headerlink" title="全局变量和局部变量的优缺点？"></a>全局变量和局部变量的优缺点？</h3><p>全局变量的优点是，减少变量的数量，降低参数数据传递的时间。缺点是全局变量存储在静态存储区，存放过多会导致消耗过多的内存。全局变量会破坏函数的封闭性和独立性，导致代码移植性差。当被多个函数调用的时候不利于调试<br>局部变量的优点是，程序动态分配内存，不会消耗太多内存。局部变量在函数内部可以保证函数的封闭和独立性。在不同函数命名相同名称的变量不会互相影响。缺点是局部函数在函数执行后就消失，不利于数据保存，且局部变量的作用域小，仅仅作用于函数内部</p>
<h3 id="讲一下原型和原型链？"><a href="#讲一下原型和原型链？" class="headerlink" title="讲一下原型和原型链？"></a>讲一下原型和原型链？</h3><p>JS在创建对象的时候都会有一个 -proto- 的内置属性，用于指向创建它的函数对象的原型对象 prototype;而函数对象也会有也有一个 -proto- 指向创建它的函数对象的原型对象，直到指向Object.prototype.这一系列的指向就像一条链子，所以也叫原型链。</p>
<h3 id="讲一下什么是闭包？"><a href="#讲一下什么是闭包？" class="headerlink" title="讲一下什么是闭包？"></a>讲一下什么是闭包？</h3><p>简单的讲，闭包就是一个函数嵌套一个函数，然后把里面的函数return出来，在js中，只有函数内的子函数才能读取函数的内部变量，闭包就是将函数内部和函数外部连接起来的桥梁，比如，函数a的内部函数b，被函数a外面的一个变量c引用的时候，这就叫创建了一个闭包；</p>
<h3 id="闭包的优点和缺点是什么"><a href="#闭包的优点和缺点是什么" class="headerlink" title="闭包的优点和缺点是什么?"></a>闭包的优点和缺点是什么?</h3><p>闭包的优点是：使变量私有化，保护函数内变量的安全，加强了函数的封装性，局部变量模拟全局变量一样，但是它只能被特定函数使用，不用担心类似全局变量的命名冲突<br>闭包的缺点是：内部函数会调用变量导致变量不会被回收，常驻变量，增大内存的使用量，使用不当会造成内存泄漏<br>可以通过手动将闭包设为null进行销毁，或删除dom元素</p>
<h3 id="call-和-apply-的区别"><a href="#call-和-apply-的区别" class="headerlink" title="call 和 apply 的区别"></a>call 和 apply 的区别</h3><p>fn.call(obj, arg1, arg2, …),调用一个函数, 具有一个指定的this值和分别地提供的参数(参数的列表)。</p>
<p>fn.apply(obj, [argsArray]),调用一个函数，具有一个指定的this值，以及作为一个数组（或类数组对象）提供的参数。</p>
<p>bind 和 call/apply 有一个很重要的区别，一个函数被 call/apply 的时候，会直接调用，但是 bind 会创建一个<strong>新函数</strong>。当这个新函数被调用时，bind() 的第一个参数将作为它运行时的 this，之后的一序列参数将会在传递的实参前传入作为它的参数</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">var person= &#123;</span><br><span class="line">    name: &#x27;lily&#x27;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function func(age, job) &#123;</span><br><span class="line">    console.log(this.name +&#x27;的年龄是&#x27;+age);</span><br><span class="line">    this.job=job</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">// 此时this指向person，[]作为func的参数传入</span><br><span class="line">func.apply(person, [18, &#x27;coder&#x27;]);</span><br><span class="line"></span><br><span class="line">// 和apply类似，只是参数形式变了</span><br><span class="line">func.call(person, 18, &#x27;student&#x27;);</span><br><span class="line"></span><br><span class="line">// 和call类似，但是需要手动赋予调用</span><br><span class="line">var funca=func.bind(person,18, &#x27;bind&#x27;)</span><br><span class="line">funca()</span><br></pre></td></tr></table></figure>
<h3 id="前端同步和异步，你是怎么理解"><a href="#前端同步和异步，你是怎么理解" class="headerlink" title="前端同步和异步，你是怎么理解"></a>前端同步和异步，你是怎么理解</h3><ul>
<li>同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；</li>
<li>异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率；</li>
</ul>
<h3 id="面向对象的概念是什么？"><a href="#面向对象的概念是什么？" class="headerlink" title="面向对象的概念是什么？"></a>面向对象的概念是什么？</h3><p>面向对象和面向过程都是一种思想，他们的区别在于，一个以对象为主，一个以过程为主，例如：冰箱装进大象要几步。面向过程是：打开(冰箱)，放入(冰箱,大象），关上(冰箱)；面向对象是：冰箱.打开()，冰箱.装进(大象)，冰箱.关门()。</p>
<p>面向对象有三种特性：封装，继承，多态；</p>
<h4 id="封装"><a href="#封装" class="headerlink" title="封装"></a>封装</h4><p>对应Es5来说没有类这个概念，但由于存在函数作用域，就可以模拟类这个概念，（类是一个模板，它描述一类对象的行为和状态）在Es5中，类其实就是保存了一个函数的变量，这个函数有自己的属性和方法。将属性和方法组成一个类的过程就是封装。</p>
<p>通过构造函数来创建对象；构造函数其实就是普通的函数，只不过有以下的特点：首字母大写，内部使用this，使用new生成实例。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Cat</span>(<span class="params">name,color</span>)&#123;   <span class="comment">//构造函数</span></span><br><span class="line">    <span class="keyword">var</span> sex = <span class="number">12</span>;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">name</span> = name;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">color</span> = color;</span><br><span class="line">&#125;</span><br><span class="line"><span class="title class_">Cat</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">type</span> = <span class="string">&quot;猫科动物&quot;</span>;    <span class="comment">//原型</span></span><br><span class="line"><span class="title class_">Cat</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">eat</span> = <span class="keyword">function</span>(<span class="params"></span>)&#123;<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;吃老鼠&quot;</span>)&#125;;</span><br><span class="line"></span><br><span class="line"><span class="title class_">Cat</span>.<span class="property">setTime</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;    <span class="comment">// 语法</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;this is new time&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> cat1 = <span class="keyword">new</span> <span class="title class_">Cat</span>(<span class="string">&quot;大毛&quot;</span>,<span class="string">&quot;黄色&quot;</span>);</span><br><span class="line"><span class="keyword">var</span> cat2 = <span class="keyword">new</span> <span class="title class_">Cat</span>(<span class="string">&quot;二毛&quot;</span>,<span class="string">&quot;黑色&quot;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(cat1.<span class="property">type</span>); <span class="comment">// 猫科动物</span></span><br><span class="line">cat1.<span class="title function_">eat</span>(); <span class="comment">// 吃老鼠</span></span><br></pre></td></tr></table></figure>
<p>通过构造函数、原型和. 语法三者都可以在类上添加属性和方法。但是三者是有一定的区别。<br><strong>构造函数</strong>：通过this添加的属性和方法总是指向当前对象的，所以在实例化的时候，通过this添加的属性和方法都会在内存中复制一份，这样就会造成内存的浪费。但是这样创建的好处是即使改变了某一个对象的属性或方法，不会影响其他的对象（因为每一个对象都是复制的一份）。<br><strong>原型</strong>：通过原型继承的方法并不是自身的，我们要在原型链上一层一层的查找，这样创建的好处是只在内存中创建一次，实例化的对象都会指向这个prototype 对象，但是这样做也有弊端，因为实例化的对象的原型都是指向同一内存地址，改动其中的一个对象的属性可能会影响到其他的对象<br><strong>. 语法</strong>：在类的外部通过. 语法创建的属性和方法只会创建一次，但是这样创建的实例化的对象是访问不到的，只能通过类的自身访问</p>
<blockquote>
<p>在函数作用域内的属性和变量都是私有变量，而通过this定义的属性和方法在实例时都会复制一遍，所以是公有变量，而原型也是公有变量。</p>
</blockquote>
<h4 id="继承"><a href="#继承" class="headerlink" title="继承"></a>继承</h4><blockquote>
<p>继承：子类可以使用父类的所有功能，并且对这些功能进行扩展。继承的过程，就是从一般到特殊的过程</p>
</blockquote>
<p>类式继承：所谓的类式继承就是使用的原型的方式，将方法添加在父类的原型上，然后子类的原型是父类的一个实例化对象。子类实例化对象的属性和方法都指向父类的原型，子类之间可能会互相影响</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//声明父类</span></span><br><span class="line"><span class="keyword">var</span> <span class="title class_">SuperClass</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> id = <span class="number">1</span>;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">name</span> = [<span class="string">&#x27;javascript&#x27;</span>];</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">superValue</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;superValue is true&#x27;</span>);</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(id)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">//为父类添加共有方法</span></span><br><span class="line"><span class="title class_">SuperClass</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">getSuperValue</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="variable language_">this</span>.superValue();</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">//声明子类</span></span><br><span class="line"><span class="keyword">var</span> <span class="title class_">SubClass</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">subValue</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;this is subValue &#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">//继承父类</span></span><br><span class="line"><span class="title class_">SubClass</span>.<span class="property"><span class="keyword">prototype</span></span> = <span class="keyword">new</span> <span class="title class_">SuperClass</span>() ;         <span class="comment">//关键语句</span></span><br></pre></td></tr></table></figure>
<p>构造函数继承:SuperClass.call(this,id) ，每个实例化的子类互不影响，内存浪费</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//声明父类</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">SuperClass</span>(<span class="params">id</span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> name = <span class="string">&#x27;javascript&#x27;</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">books</span>=[<span class="string">&#x27;javascript&#x27;</span>,<span class="string">&#x27;html&#x27;</span>,<span class="string">&#x27;css&#x27;</span>];</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">id</span> = id</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//声明父类原型方法</span></span><br><span class="line"><span class="title class_">SuperClass</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">showBooks</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">books</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//声明子类</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">SubClass</span>(<span class="params">id</span>) &#123;</span><br><span class="line">    <span class="title class_">SuperClass</span>.<span class="title function_">call</span>(<span class="variable language_">this</span>,id)        <span class="comment">//关键语句；通过call 替换掉父级到this指向</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="多态"><a href="#多态" class="headerlink" title="多态"></a>多态</h4><p>多态的基本概念：一个引用类型（变量）在不同情况下的多种状态。多态用途在于做面向对象开发时，需要有一个方法不变，但是它接收的参数类型是变化的，就可以使用多态</p>

  </article>
  <aside class="table-content" id="site-toc">
  <div class="table-content-title">
    <i class="fa fa-arrow-right fa-lg" id="site-toc-hide-btn"></i>
    <span>目录</span>
  </div>
  <div class="table-content-main">
    <ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#HTTP%E5%B8%B8%E8%A7%81%E7%9A%84%E8%AF%B7%E6%B1%82%E6%96%B9%E5%BC%8F%EF%BC%9F"><span class="toc-text">HTTP常见的请求方式？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#POST-%E5%92%8C-GET-%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-text">POST 和 GET 的区别</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AE%B2%E4%B8%80%E4%B8%8BHTTP%E7%9A%84%E6%8F%A1%E6%89%8B%E8%BF%87%E7%A8%8B%EF%BC%9F"><span class="toc-text">讲一下HTTP的握手过程？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%8B%E7%BB%8D%E4%B8%8BHTTPS%E7%9A%84%E6%8F%A1%E6%89%8B%E8%BF%87%E7%A8%8B%EF%BC%9F"><span class="toc-text">介绍下HTTPS的握手过程？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Http1-x%E5%92%8C2-0%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="toc-text">Http1.x和2.0的区别？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A6%82%E4%BD%95%E4%B8%AD%E6%96%ADajax%E8%AF%B7%E6%B1%82%EF%BC%9F"><span class="toc-text">如何中断ajax请求？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#cookie%EF%BC%8CsessionStorage%E5%92%8ClocalStorage"><span class="toc-text">cookie，sessionStorage和localStorage</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#src%E5%92%8Chref%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="toc-text">src和href的区别？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9B%BE%E7%89%87%E4%BC%98%E5%8C%96%E6%8A%80%E6%9C%AF%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F"><span class="toc-text">图片优化技术有哪些？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%A8%E5%B1%80%E5%8F%98%E9%87%8F%E5%92%8C%E5%B1%80%E9%83%A8%E5%8F%98%E9%87%8F%E7%9A%84%E4%BC%98%E7%BC%BA%E7%82%B9%EF%BC%9F"><span class="toc-text">全局变量和局部变量的优缺点？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AE%B2%E4%B8%80%E4%B8%8B%E5%8E%9F%E5%9E%8B%E5%92%8C%E5%8E%9F%E5%9E%8B%E9%93%BE%EF%BC%9F"><span class="toc-text">讲一下原型和原型链？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AE%B2%E4%B8%80%E4%B8%8B%E4%BB%80%E4%B9%88%E6%98%AF%E9%97%AD%E5%8C%85%EF%BC%9F"><span class="toc-text">讲一下什么是闭包？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%97%AD%E5%8C%85%E7%9A%84%E4%BC%98%E7%82%B9%E5%92%8C%E7%BC%BA%E7%82%B9%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-text">闭包的优点和缺点是什么?</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#call-%E5%92%8C-apply-%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-text">call 和 apply 的区别</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%89%8D%E7%AB%AF%E5%90%8C%E6%AD%A5%E5%92%8C%E5%BC%82%E6%AD%A5%EF%BC%8C%E4%BD%A0%E6%98%AF%E6%80%8E%E4%B9%88%E7%90%86%E8%A7%A3"><span class="toc-text">前端同步和异步，你是怎么理解</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%A6%82%E5%BF%B5%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F"><span class="toc-text">面向对象的概念是什么？</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%B0%81%E8%A3%85"><span class="toc-text">封装</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%BB%A7%E6%89%BF"><span class="toc-text">继承</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%A4%9A%E6%80%81"><span class="toc-text">多态</span></a></li></ol></li></ol>
  </div>
</aside>

  
  
    <aside class="passage-copyright">
      <div>本文作者: 饿包子</div>
      
        <div>
          原文链接: 
          <a href="" target="_blank">https://lixianbin1.github.io/blog/2020/10/26/%E3%80%90%E9%9D%A2%E8%AF%95%E9%9B%86%E9%94%A6%E3%80%91%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98%E7%9A%84%E6%94%B6%E9%9B%86%E5%92%8C%E6%80%BB%E7%BB%93(JS%20%E7%AF%87)/</a>
        </div>
      
      <div>
        版权声明: 本博客所有文章除特别声明外, 均采用 <a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a> 许可协议. 转载请注明出处!
      </div>
    </aside>
  
  
</div>

    </main>
    
    
<div class="site-footer-wrapper">
<!--
  <div class="footer-top">
    <a class="left" href="/blog/2020/10/27/%E3%80%90%E9%9D%A2%E8%AF%95%E9%9B%86%E9%94%A6%E3%80%91%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98%E7%9A%84%E6%94%B6%E9%9B%86%E5%92%8C%E6%80%BB%E7%BB%93(Vue%20%E7%AF%87)/" data-enable="true">
      <i class="fa fa-arrow-left"></i>
    </a>
    <a class="right" href="/blog/2020/10/26/%E3%80%90%E9%9D%A2%E8%AF%95%E9%9B%86%E9%94%A6%E3%80%91%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98%E7%9A%84%E6%94%B6%E9%9B%86%E5%92%8C%E6%80%BB%E7%BB%93(%E5%9F%BA%E7%A1%80%E7%AF%87)/" data-enable="true">
      <i class="fa fa-arrow-right"></i>
    </a>
  </div>
-->
  <footer class="site-footer">
    
      
        <div class="site-footer-col">
          <h5 class="site-footer-title">网站推荐</h5>
          
            <span class="site-footer-item">
              <a href="https://tympanus.net/codrops/" target="_blank">Codrops</a>
            </span>
          
            <span class="site-footer-item">
              <a href="http://taobaofed.org/" target="_blank">淘宝前端团队(FED)</a>
            </span>
          
        </div>
      
        <div class="site-footer-col">
          <h5 class="site-footer-title">文档教程</h5>
          
            <span class="site-footer-item">
              <a href="https://es6.ruanyifeng.com/" target="_blank">ES6入门</a>
            </span>
          
            <span class="site-footer-item">
              <a href="https://developer.mozilla.org/zh-CN/docs/Web" target="_blank">MDN Web文档</a>
            </span>
          
        </div>
      
        <div class="site-footer-col">
          <h5 class="site-footer-title">兴趣前沿</h5>
          
            <span class="site-footer-item">
              <a href="https://threejs.org/" target="_blank">threejs</a>
            </span>
          
            <span class="site-footer-item">
              <a href="https://github.com/justadudewhohacks/face-api.js" target="_blank">face-api</a>
            </span>
          
        </div>
      
    
    <div class="site-footer-info">
      <i class="fa fa-clock-o"></i> 本站已稳定运行<span id="site-time"></span>
    </div>
    
      <div class="site-footer-info">
        <i class="fa fa-paw"></i> 您是本站第 <span id="site-count"></span> 位访客
      </div>
    
    
      <div class="site-footer-info">
        <i class="fa fa-at"></i> Email: xianbin.me@qq.com
      </div>
    
<!--     <div class="site-footer-info">
      <i class="fa fa-copyright"></i> 
      2019 <a href="https://github.com/dongyuanxin/theme-ad/" target="_blank">Theme-AD</a>.
      Created by <a href="https://godbmw.com/" target="_blank">GodBMW</a>.
      All rights reserved.
    </div> -->
  </footer>
</div>
    <div id="site-layer" style="display:none;">
  <div class="site-layer-content">
    <div class="site-layer-header">
      <span class="site-layer-header-title" id="site-layer-title"></span>
      <i class="fa fa-close" id="site-layer-close"></i>
    </div>
    <div class="site-layer-body" id="site-layer-container">
      <div class="site-layer-input" id="site-layer-search" style="display: none;">
        <input type="text">
        <i class="fa fa-search"></i>
      </div>
      
        <div class="site-layer-reward" id="site-layer-reward" style="display: none;">
          
            <div>
              <img src="/blog/images/wechat.png" alt="WeChat">
              
                <p>WeChat</p>
              
            </div>
          
            <div>
              <img src="/blog/images/alipay.png" alt="AliPay">
              
                <p>AliPay</p>
              
            </div>
          
        </div>
      
      <div id="site-layer-welcome" style="display:none;"></div>
    </div>
  </div>
</div>
    

<div class="bottom-bar">

  <div class="bottom-bar-left">
<!--
    <a href="/blog/2020/10/27/%E3%80%90%E9%9D%A2%E8%AF%95%E9%9B%86%E9%94%A6%E3%80%91%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98%E7%9A%84%E6%94%B6%E9%9B%86%E5%92%8C%E6%80%BB%E7%BB%93(Vue%20%E7%AF%87)/" data-enable="true">
      <i class="fa fa-arrow-left"></i>
    </a>
    <a href="/blog/2020/10/26/%E3%80%90%E9%9D%A2%E8%AF%95%E9%9B%86%E9%94%A6%E3%80%91%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98%E7%9A%84%E6%94%B6%E9%9B%86%E5%92%8C%E6%80%BB%E7%BB%93(%E5%9F%BA%E7%A1%80%E7%AF%87)/" data-enable="true">
      <i class="fa fa-arrow-right"></i>
    </a>
-->
  </div>

  
  
  
  <div class="bottom-bar-right">
    <a href="javascript:void(0);" data-enable="true" id="site-toc-show-btn">
      <i class="fa fa-bars"></i>
    </a>
    
      <a href="#site-comment" data-enable="true">
        <i class="fa fa-commenting"></i>
      </a>
    
    <a href="javascript:void(0);" id="site-toggle-share-btn">
      <i class="fa fa-share-alt"></i>
    </a>
    
    <a href="javascript:void(0);" id="back-top-btn">
      <i class="fa fa-chevron-up"></i>
    </a>
  </div>
</div>
    <div id="share-btn">
  
  
  
    <a id="share-btn-weibo" href="javascript:void(0);" target="_blank">
      <i class="fa fa-weibo"></i>
    </a>
  
  
    <a id="share-btn-qq" href="javascript:void(0);" target="_blank">
      <i class="fa fa-qq"></i>
    </a>
  
  
</div>
    





    
  </body>
</html>